<template>
<div class="container content-wraper">
  <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="mobile" :attr="{ maxlength: 11 }"></mt-field>
  <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password" state="success"></mt-field>
  <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="password2" state="success"></mt-field>
  <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email" state="warning"></mt-field>
  <mt-field label="许可码" placeholder="请输入许可码" type="password" v-model="code"></mt-field>
  <mt-field label="地址" placeholder="请输入地址" v-model="address"></mt-field>
  <mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
  <div class="btn-wrapper">
    <p class="">
      <button class="button is-primary" @click="btnSubmit">Submit</button>
    </p>
  </div>
</div>
</template>
<script>
  import SHA256 from 'crypto-js/sha256';
  import { Field } from 'mint-ui';
  import { Message } from 'element-ui';
  import { mapActions } from 'vuex';

  export default {
    data() {
      return {
        password: '',
        password2: '',
        mobile: '',
        email: '',
        code: '',
        birthday: '',
        address: '',
      };
    },
    methods: {
      btnSubmit() {
        this.$http.post(this.$url.USERREGISTER, {
          password: SHA256(this.password).toString(),
          password2: SHA256(this.password2).toString(),
          mobile: this.mobile,
          email: this.email,
          code: this.code,
          birthday: this.birthday,
          address: this.address,
        }).then((res) => {
          if (res.data.rtnCode === '000') {
            Message({
              message: '注册成功，即将跳转主页',
              type: 'success',
              duration: 2000,
            });
            this.CHANGELOGIN();
            this.GETMOBILE(this.mobile);
            this.ISADMIN();
            setTimeout(() => {
              this.$router.push({ name: 'Home' });
            }, 2000)
          } else {
            Message({
              message: res.data.rtnMsg,
              type: 'error',
              duration: 2000,
            });
          }
        }).catch((error) => {
          Message({
            message: '注册失败，请检查网络',
            type: 'error',
            duration: 2000,
          });
        })
      },
      // ...mapMutations([
      //   'CHANGELOGIN',
      //   'GETMOBILE',
      // ]),
      ...mapActions([
        'CHANGELOGIN',
        'GETMOBILE',
        'ISADMIN',
      ]),
    },
    components: {
      'mt-field': Field,
    },
  };
  
</script>

<style lang="scss">
@import '../scss/base.scss';
  .content-wraper {
    margin: 1.5em 0em;
    .is-grouped {
      justify-content: center;
    }
    .btn-wrapper {
      text-align:center;
      margin-top: 0 auto;
      @include px2rem(margin-top, 60);
    }
    @media screen and (min-width: 769px) {
      .mint-cell {
        @include px2rem(margin-left, 100);
        @include px2rem(margin-right, 100);
      }
    }
    @media screen and (min-width: 992px) {
      .mint-cell {
        @include px2rem(margin-left, 130);
        @include px2rem(margin-right, 130);
      }
    }
    @media screen and (min-width: 1200px) {
      .mint-cell {
        @include px2rem(margin-left, 150);
        @include px2rem(margin-right, 150);
      }
    }
  }
</style>
